import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Card, Table } from 'antd';

@connect(({ empsearch, loading }) => ({
  loading: loading.models.empsearch,
  wageDataList: empsearch.wageDataList, // 代发工资列表数据
}))
@Form.create()
class EmpInfor extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {};
  }

  componentDidMount() {}

  jumpRouting = (targetRouter, id) => {
    const { jumpRouting } = this.props;
    jumpRouting(targetRouter, id);
  };

  render() {
    const { wageDataList, loading } = this.props;
    const columns = [
      {
        title: '收入年月',
        dataIndex: 'busiYm',
        onHeaderCell: () => ({ style: { fontWeight: 'bolder' } }),
        // render: text => text && moment(text).format('YYYY-MM'),
        render: val => val && `${val.toString().substr(0, 4)}-${val.toString().substr(4, 5)}`,
      },
      {
        title: '实发工资',
        dataIndex: 'realAmo',
        onHeaderCell: () => ({ style: { fontWeight: 'bolder' } }),
        render: val => (val ? val.toFixed(2) : '--'),
      },
      {
        title: '个人所得税',
        dataIndex: 'perAmo',
        onHeaderCell: () => ({ style: { fontWeight: 'bolder' } }),
        render: val => (val ? val.toFixed(2) : '--'),
      },
      {
        title: '状态',
        dataIndex: 'stateName',
        onHeaderCell: () => ({ style: { fontWeight: 'bolder' } }),
      },
      {
        title: '收入类型',
        dataIndex: 'incmTypeName',
        onHeaderCell: () => ({ style: { fontWeight: 'bolder' } }),
      },
      {
        title: '客户名称',
        dataIndex: 'custName',
        onHeaderCell: () => ({ style: { fontWeight: 'bolder' } }),
      },
      {
        title: '执行地区',
        dataIndex: 'cityName',
        onHeaderCell: () => ({ style: { fontWeight: 'bolder' } }),
      },
      {
        title: '操作',
        dataIndex: 'operTime',
        onHeaderCell: () => ({ style: { fontWeight: 'bolder', width: 150 } }),
        render: (text, record) =>
          record.state === 6 ? ( // 问题人员
            <span
              style={{ color: '#1890FF', cursor: 'pointer' }}
              onClick={() => this.jumpRouting('wageOrderProbId', record.wageOrderProbId)}
            >
              查看
            </span>
          ) : (
            <span
              style={{ color: '#1890FF', cursor: 'pointer' }}
              onClick={() => this.jumpRouting('wageOrderInfoId', record.wageOrderInfoId)}
            >
              查看
            </span>
          ),
      },
    ];
    return (
      <div>
        <Card
          title={<span style={{ fontWeight: 'bolder' }}>代发工资</span>}
          extra={<a onClick={() => this.jumpRouting('wageOrderInfoId')}>更多&gt;&gt;</a>}
        >
          <Table
            rowSelection={null}
            columns={columns}
            dataSource={wageDataList && wageDataList.list}
            loading={loading}
            rowKey="wageOrderInfoId"
            pagination={false}
          />
        </Card>
      </div>
    );
  }
}

export default EmpInfor;
